import React, { useState } from "react";
import { NavBar, Space, Toast, Button, Dialog, Divider, Stepper } from 'antd-mobile'
import { CloseOutline, MoreOutline, SearchOutline } from 'antd-mobile-icons'
import { useLocation, useNavigate } from "react-router-dom";
import './payment.css'
import axios from "axios";
export default function Payment() {
    const location = useLocation()
    const result = location.state
    console.log(result)
    const navigate = useNavigate()
    const back = async () => {
        const result = await Dialog.confirm({
            title: "确认退出支付",
            content: '您的订单尚未支付，请尽快支付',
        })
        if (result) {
            Toast.show({ content: '点击了确认', position: 'bottom' })

        } else {
            Toast.show({ content: '点击了取消', position: 'bottom' })
            addOrder1()
            navigate(-1)
        }
    }

    const getCouponDetail = async () => {
        let res = await axios.get(`http://localhost:3000/ycf/getCouponDetail?_id=${id}`)
        if (res.data.code == 200) {
            setcoupon(res.data.data[0])
            console.log(res.data.data[0])
        }
    }

    const generateRandomString = (length = 8) => {
        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        let result = '';

        for (let i = 0; i < length; i++) {
            const randomIndex = Math.floor(Math.random() * characters.length);
            result += characters[randomIndex];
        }

        return result;
    };
    const [price, setPrice] = useState(result.endPrice)
    const [quantity, setQuantity] = useState(1)
    const orderId = generateRandomString()
    const form = {
        c_id: "676cb0b2aa1927093f1d957f",
        name: result.title,
        imgUrl: result.imgUrl,
        quantity: quantity,
        orderPrice: price,
        type: result.type,
        orderId: orderId,
    }
    const addOrder = async () => {

        console.log(form)
        let res = await axios.post('http://localhost:3000/ycf/addOrder', form)
        if (res.data.code == 200) {
            navigate('/really', { state: form })
        }
    }

    const addOrder1 = async () => {
        const orderId = generateRandomString()
        const form = {
            name: result.title,
            quantity: 1,
            imgUrl: result.imgUrl,
            orderPrice: result.endPrice,
            type: result.type,
            orderId: orderId,
        }
        console.log(form)
        let res = await axios.post('http://localhost:3000/ycf/addOrder', form)
        if (res.data.code == 200) {

        }
    }



    return (
        <div className="payment-box">
            <div className="payment-title">
                <NavBar onBack={back}>支付订单</NavBar>
            </div>
            <div className="payment-content">
                <div className="payment-content-children1">
                    <div className="payment-content-children1-left">
                        <img src={result.imgUrl} alt="" width={150} height={150} style={{ marginTop: 2 }} />
                    </div>
                    <div className="payment-content-children1-right">
                        <p style={{ fontSize: 20, color: 'white', marginBottom: 20 }}>{result.title}</p>
                        <span style={{ fontSize: 16, color: 'white', marginTop: 20 }}>随时退 | 面预约 | 过期自动退 | 可叠加</span>
                        <p style={{ fontSize: 22, color: 'red', marginTop: 10 }}>￥{result.endPrice}</p>
                        <Stepper
                            defaultValue={1}
                            style={{ marginTop: 65, marginLeft: 200 }}
                            onChange={value => {
                                console.log(value)
                                setQuantity(value)
                                setPrice(value * result.endPrice)
                            }}
                        />
                    </div>
                </div>
                <div className="payment-content-children2">
                    <div className="payment-content-chlidren2-1">
                        <p>小计</p><p style={{marginTop:3}}>{price}</p>

                    </div>
                    <div className="payment-content-chlidren2-2">
                        <p>使用金额</p><p>{price}</p>
                    </div>
                    <button className="payment-content-children2-button"
                        onClick={() => {
                            addOrder()
                        }}
                    >{price} 确认下单</button>
                </div>
            </div>
        </div>
    )
}